
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    {literal}
    <head>
        <title>EAN API TEST</title>
        <link href="css/templatemo_style.css" rel="stylesheet" type="text/css" />
        <link href="css/widget.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />

        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/ddsmoothmenu.js"></script>
        <script type="text/javascript" src="js/swfobject/swfobject.js"></script>
        <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
        
        <script type="text/javascript">
            var flashvars = {};
            flashvars.cssSource = "css/piecemaker.css";
            flashvars.xmlSource = "piecemaker.xml";
	
            var params = {};
            params.play = "true";
            params.menu = "false";
            params.scale = "showall";
            params.wmode = "transparent";
            params.allowfullscreen = "true";
            params.allowscriptaccess = "always";
            params.allownetworking = "all";
  
            swfobject.embedSWF('piecemaker.swf', 'piecemaker', '960', '440', '10', null, flashvars,    
            params, null);
        </script>


        <script language="javascript" type="text/javascript">
            function clearText(field)
            {
                if (field.defaultValue == field.value) field.value = '';
                else if (field.value == '') field.value = field.defaultValue;
            }
        </script>
        <script type="text/javascript">
        function add_room()
        {
            for(i=2;i<=8;i++)
            {	
                if(document.getElementById('room'+i).style.display=="none"){
                    document.getElementById('room'+i).style.display="inline";
                    break;
                }		
            }	
        }
        </script>

        <script type="text/javascript">
            ddsmoothmenu.init({
            mainmenuid: "templatemo_menu", //menu DIV id
            orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
            classname: 'ddsmoothmenu', //class added to menu's outer DIV
            //customtheme: ["#1c5a80", "#18374a"],
            contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
            });

        </script> 
        <style>
            #hotel-division{
                margin: 10px auto;
                padding: 0px;
                width: 1000px;
                height: 200px;
            }
            #hotel-data{
                max-height: 190px;
                min-height: 142px;
            }
            #hotel-content{
                width: 780px;

                margin-top: 20px;
                margin-right: 20px; 
            }
            #hotel-details-expansion{
                display: block;
                background-color:#f58400;
                width: 998px;
                height: 20px;
                float:left;
            }

            #expansion-button{
                width: 30px;
                height: 20px;
            }
            #hotel-bottom-details{
                margin-left: 20px ;
                width: 150px;
                text-align: center;

            }
            #hotel-cancel-policy{
                width: 150px;
                text-align: center;

            }
            #hotel-reviews{
                width: 150px;
                text-align: center;
            }
            #hotel-star-rating{
                width: 220px;
                height: 20px;
                text-align: center;
            }
            #hotel-maps{
                width: 150px;
                text-align: center;
            }
            #hotel-name-price{
                display: block;
            }
            #hotel-short-desc{
                display: block;
                height: 38px;
                width: 780px;
                float: left;
            }
            #hotel-star-rating-img{
                height:20px;
                border: 0 none #fff;
                margin: 0px;
                padding: 0px;
            }
            #hotel-star-rating b{
                height: 20px;
                border: 0 none #fff;
                margin: 0px;
                padding: 0px;
                vertical-align: top;
            }
            #hotel-ribbon-offers{
                /*padding-left: 300px;*/
                height: 30px;
                width: 998px;
                text-align: end;
                padding: 0px;
            }
            #hotel-ribbon-offers span, #hotel-ribbon-offers img{
                vertical-align: bottom;
                height: 30px;
            }
            #hotel-text{
                padding-right:20px;
                font-weight: bold;  
            }
            .thumbnailImage{
                max-width: 150px;
                max-height: 150px;
                min-width: 100px;
                min-height: 100px;

                border:1px solid #2b81af;
                margin-left: 20px;
                margin-top: 20px;

            }
            .border-on{
                border:1px solid #2b81af; 
            }

            .inline-block{
                display: inline-block;
            }
            .left{
                float: left;
            }
            .right{
                float: right;

            }
            .marginless{
                margin: 0px;
                padding: 0px;
            }
            .spacer{

            }
            .rating{
                margin-left: 10px;
                max-width: 120px;
                height: 19px;
            }
            span.rating{
                width: 120px;
            }
            .hidden{
                visibility: hidden;
            }
        </style>
        
        <script> 
            function SetRating(imgvar,starsCount)
            {
                var number = Math.round(starsCount/20);
                if(number != 0){
                    if(!$(imgvar).parent().find("span").hasClass("hidden"))
                        $(imgvar).parent().find("span").addClass("hidden");
                    if(!$(imgvar).hasClass("hidden")){
                        $(imgvar).removeClass("hideen");
                    }
                    $(imgvar).attr("src","../../images/rating/star"+number+".png");
                     
                }else{ 
                    $(imgvar).addClass("hidden");
                    $(imgvar).parent().find("span").removeClass("hidden");
                }
            }
        </script>
    </head>
    {/literal}
    <body style="top: -16px; position: relative;">
        {include file="header.tpl"}    
        {foreach $hotelArray as $hotel}
            <div id="hotel-division">
                <div id="hotel-ribbon-offers" class="hidden border-on" >
                    <img src="" />
                    <span>Promotion:</span>
                    <span id="hotel-text">Discount 30 % -- Book now !&nbsp;&nbsp;&nbsp;</span>
                </div>
                <div id="hotel-data" class="border-on marginless" >
                    <img class="thumbnailImage inline-block left" src="{$hotel.thumbnailUrl}" />
                    <div id="hotel-content" class="inline-block right">
                        <span id="hotel-name-price" class="" >
                            <h3 class="left">{$hotel.hotelName}</h3>
                            <h3 class="right">Pret: 300 euro</h3>
                        </span>
                        <span id="hotel-short-desc" class="">
                            {$hotel.shortDesc|unescape:"htmlall"}
                        </span>
                    </div>
                    <span id="" class=""></span>
                    <span id="" class=""></span>
                    <span id="" class=""></span>

                    <div id="hotel-details-expansion" class="">
                        <span id="hotel-bottom-details" class="left">Camere libere: 4</span>
                        <span class="spacer left">|</span>
                        <span id="hotel-cancel-policy" class="left">Polita de anulare</span>
                        <span class="spacer left">|</span>
                        <span id="hotel-reviews" class="left">Vezi comentarii</span>
                        <span class="spacer left">|</span>
                        <span id="hotel-maps" class="left">Vezi hotelul pe harta</span>
                        <span id="hotel-star-rating" class="right">
                            <b>Star Rating:</b>
                            <span style="width: 120px;">
                                <img class="rating" src="../../images/rating/star1.png" 
                                     height="19px" onload="SetRating(this,{$hotel.rating});"/>
                            </span>
                            <span class="rating hidden"></span>
                        </span>


                    </div>
                </div>
            </div>
        {/foreach}
        {include file="footer.tpl"}
    </body>
</html>
